<template>
  <div id="aboutView">
    <div class="grid-demo-background">
      <a-space direction="vertical" :size="16" style="display: block">
        <a-row class="grid-demo">
          <a-col :span="12">
            <div style="text-align: center">姓名:{{ user.name }}</div>
          </a-col>
          <a-col :span="12">
            <a-row> 性别:{{ user.sex == 1 ? "男" : "女" }}</a-row>
          </a-col>
        </a-row>
        <a-row class="grid-demo">
          <a-col :span="12">
            <div style="text-align: center">电话:{{ user.iphone }}</div>
          </a-col>
          <a-col :span="12">
            <a-row> 角色:{{ user.role == 1 ? "学生" : "管理员" }}</a-row>
          </a-col>
        </a-row>
      </a-space>
    </div>
    <hr />
    <a-form :model="form" @submit="handleSubmit">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item field="账号" label="账号" label-col-flex="80px">
            <a-input v-model="form.account" placeholder="please enter..." />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="密码" label="密码" label-col-flex="80px">
            <a-input v-model="form.password" placeholder="please enter..." />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="16">
          <a-form-item field="姓名" label="姓名" label-col-flex="100px">
            <a-input v-model="form.name" placeholder="please enter..." />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="性别" label="性别" label-col-flex="80px">
            <a-select
              v-model="form.sex"
              :style="{ width: '320px' }"
              placeholder="Please select ..."
              show-header-on-empty
            >
              <a-option value="1">女</a-option>
              <a-option value="0">男</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="16">
          <a-form-item field="电话" label="电话" label-col-flex="100px">
            <a-input v-model="form.iphone" placeholder="please enter..." />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item field="角色" label="角色" label-col-flex="80px">
            <a-select
              v-model="form.role"
              :style="{ width: '320px' }"
              placeholder="Please select ..."
              show-header-on-empty
            >
              <a-option value="0">学生</a-option>
              <a-option value="1">员工</a-option>
              <a-option value="2">管理员</a-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { User, UserControllerService } from "../../../generated";
import { useStore } from "vuex";

const store = useStore();
const user = store.state.user?.loginUser;

const repair = () => {
  alert(user.id);
};
const form = reactive({
  id: undefined,
  account: "",
  iphone: undefined,
  name: "",
  password: "",
  role: undefined,
  sex: undefined,
} as User);

const handleSubmit = () => {
  form.id = user.id;
  UserControllerService.updateUserUsingPost(form);
};
</script>

<style>
#aboutView {
  margin-bottom: 10px;
  text-align: inherit;
}
</style>
